<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>Hourly分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info">公用过滤条件</span>
                    </div>
                    <div class="ibox-content">
                        <span class="font-size-h1">选择时间:</span>
                        <button id="time_show_bt" type="button" class="btn btn-default no-margins no-borders no-paddings" style="padding-bottom: 0px">
                            <span id="date1"></span>
                            <span class="caret"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="ibox col-sm-12">
                <div class="ibox-title">
                    <span class="label label-success">每天每小时活跃用户分布图</span>
                </div>
                <div class="ibox-content">
                    <div id="demo">-</div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="ibox col-sm-12">
                <div class="ibox-title">
                    <span class="label label-success">每天每小时会话个数分布图</span>
                </div>
                <div class="ibox-content">
                    <div id="demo2">-</div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="ibox col-sm-12">
                <div class="ibox-title">
                    <span class="label label-success">每天每小时会话长度分布图</span>
                </div>
                <div class="ibox-content">
                    <div id="demo3">-</div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

    <script type="text/javascript">
        function loadContent(sd, ed, metric, showId) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/user_behavior?platform=website&group_by=day";
            url += "&start_date=" + sd + "&end_date=" + ed + "&metric=" + metric;
            $.get(url, {}, function(data){
                if (data.code == "200") {
                    if (data.data && data.data.length > 0) {
                        var series = {};
                        var isOneDay = true;
                        $.each(data.data, function(i, item){
                            var day = item["day"];
                            series[day] = series[day] ? series[day] : {name: day + "数据", data:[]};
                            series[day]["data"].push(item["$hour_00"]);
                            series[day]["data"].push(item["$hour_01"]);
                            series[day]["data"].push(item["$hour_02"]);
                            series[day]["data"].push(item["$hour_03"]);
                            series[day]["data"].push(item["$hour_04"]);
                            series[day]["data"].push(item["$hour_05"]);
                            series[day]["data"].push(item["$hour_06"]);
                            series[day]["data"].push(item["$hour_07"]);
                            series[day]["data"].push(item["$hour_08"]);
                            series[day]["data"].push(item["$hour_09"]);
                            series[day]["data"].push(item["$hour_10"]);
                            series[day]["data"].push(item["$hour_11"]);
                            series[day]["data"].push(item["$hour_12"]);
                            series[day]["data"].push(item["$hour_13"]);
                            series[day]["data"].push(item["$hour_14"]);
                            series[day]["data"].push(item["$hour_15"]);
                            series[day]["data"].push(item["$hour_16"]);
                            series[day]["data"].push(item["$hour_17"]);
                            series[day]["data"].push(item["$hour_18"]);
                            series[day]["data"].push(item["$hour_19"]);
                            series[day]["data"].push(item["$hour_20"]);
                            series[day]["data"].push(item["$hour_21"]);
                            series[day]["data"].push(item["$hour_22"]);
                            series[day]["data"].push(item["$hour_23"]);
                            isOneDay = isOneDay ? i == 0 : isOneDay;
                        });
                        var chartType = isOneDay ? "column" : "spline";

                        var chart = new Highcharts.Chart({
                            chart : {
                                renderTo : showId, // 在那个标签上显示，指定id即可
                                type : chartType // 类型
                            },
                            xAxis : {
                                title : {
                                    text : "时刻"
                                },
                                categories: ["hour0","hour1","hour2","hour3","hour4","hour5","hour6","hour7","hour8","hour9","hour10","hour11","hour12","hour13","hour14","hour15","hour16","hour17","hour18","hour19","hour20","hour21","hour22","hour23"]
                            },
                            yAxis : [{
                                min: 0,
                                title : {
                                    text : "数量"
                                }
                            }],
                            series : []
                        });
                        for (var c in series) {
                            chart.addSeries(series[c]);
                        }
                    } else {
                        showNoConnent(showId);
                    }
                } else {
                    showNoConnent(showId, "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
                }
            }, "json");
        };

        $(document).ready(function(){
            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            loadContent(sd, ed, "hourly_active_user", "demo");
            loadContent(sd, ed, "hourly_sessions", "demo2");
            loadContent(sd, ed, "hourly_sessions_length", "demo3");

            // 显示时间控件
            new AE_Date('date1','time_show_bt',function(startDate, endDate){
                loadContent(startDate, endDate, "hourly_active_user", "demo");
                loadContent(startDate, endDate, "hourly_sessions", "demo2");
                loadContent(startDate, endDate, "hourly_sessions_length", "demo3");
            }, sd, ed);
        });
        
    </script>
</body>
</html>